<script setup lang="ts">
  import HelloWorld from './components/HelloWorld.vue';
  import { useIpcRenderer } from '@vueuse/electron';

  const ipcRenderer = useIpcRenderer();

  ipcRenderer.send('asynchronous-message', '渲染进程发送异步消息');
  const syncReply = ipcRenderer.sendSync('synchronous-message', '渲染进程发送同步消息');
  console.log('回复同步消息', syncReply.value);

  // 接收渲染进程异步消息
  ipcRenderer.on('asynchronous-reply', function (event, msg) {
    console.log({ msg, event });
  });
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/electron-vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite3 + Vue" />
</template>

<style scoped>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }

  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }

  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>
